<template>
  <el-container class="allllll">
    <!-- 头 -->
    <el-header>
      <div class="header">
        <img src="../assets/三湘银行.png" alt="" />
        <ul>
          <li><a href="https://www.csxbank.com/szyh.html">手机银行</a></li>
          <li><a href="http://campus.51job.com/csxbank2022/">校园招聘</a></li>
          <li>
            <a
              href="https://cms-cloud.csxbank.com/icc/Eclient/pch5/index.html?mgw=1&bizType=%E5%AE%98%E7%BD%91&robotId=a229a99f2e7c4d6dbca00f17989fec11"
              >在线客服</a
            >
          </li>
        </ul>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边 -->
      <el-main class="main">
        <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
        >
        </vue-particles>

        <el-card class="box-card">
          <el-radio-group v-model="radio">
            <el-radio-button :label="1">用 &nbsp;&nbsp; 户</el-radio-button>
            <el-radio-button :label="2" @click="routerToAdmin"
              >管理员</el-radio-button
            >
          </el-radio-group>
          <div slot="header" class="header-card"></div>
          <el-form :model="user" :rules="rules" ref="user">
            <el-form-item prop="username">
              <el-input
                suffix-icon="el-icon-user-solid"
                v-model="user.username"
                clearable
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                suffix-icon="el-icon-s-goods"
                v-model="user.password"
                clearable
                type="password"
                placeholder="请输入密码"
              >
              </el-input>
            </el-form-item>
            <div class="button">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="primary" @click="openRegisterDialog"
                >注册</el-button
              >
            </div>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      radio: 1,

      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    openRegisterDialog() {
      this.$router.push("/register");
    },
    login() {
      this.$refs["user"].validate((valid) => {
        if (valid) {
          Cookies.set("username", this.user.username);

          this.$http
            .post("http://127.0.0.1:8001/API/auth", {
              params: this.user,
            })
            .then((res) => {
              if (res.data.code != 1000) {
                this.$message({
                  message: res.data.message,
                  type: "error",
                });
              } else {
                if (this.radio == 1 && res.data.data.adminFlag == 0) {
                  console.log(res);
                  sessionStorage.setItem("username", res.data.data);
                  Cookies.set("adminFlag", res.data.data.adminFlag);
                  Cookies.set("token", res.data.data.token);

                  this.$router.push("/wel");
                } else if (this.radio == 2 && res.data.data.adminFlag == 1) {
                  console.log(res);
                  sessionStorage.setItem("username", res.data.data);
                  Cookies.set("adminFlag", res.data.data.adminFlag);
                  Cookies.set("token", res.data.data.token);

                  this.$router.push("/wel");
                } else {
                  this.$message({
                    message: "非法登陆",
                    type: "error",
                  });
                }
              }
            })
            .catch((e) => {
              this.$message.error("服务器端未启动!!");
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.allllll {
  width: 100%;
  height: 100%;
}
a {
  color: #ffffff;
  text-decoration: none;
}
* {
  list-style: none;
}

.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;

  background-color: #333333;
}
.header img {
  margin-top: 17px;
  margin-left: 15px;
}
.header ul {
  position: relative;
  bottom: 25px;
}
.header li {
  margin-right: 7px;
  color: #f4f4f4;
  float: right;
}
.button {
  display: flex;
  flex-wrap: nowrap;
}

.box-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  float: left;
  height: 330px;
  border: none;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.login-form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0px 20px;
  border: none;
  box-sizing: border-box;
}

.el-button {
  display: flex;
  flex-direction: row;

  justify-content: space-between;
  width: 50%;
  font-weight: bold;
  height: 40px;
  font-size: 18px;
  border-radius: 10px;
}

.header-card {
  display: flex;
  justify-content: center;
  height: 20px;
  font-size: 18px;
}

.el-input {
  border-radius: 10px;
  height: 50px;
  font-size: 18px;
  border-bottom-color: green;
}
</style>
